import { Image, View, Text } from "@tarojs/components";
import { useEffect } from "react";
import Taro from "@tarojs/taro";
import { useState } from "react";

import { AtMessage } from "taro-ui";

import "./index.scss";
type PropsType = {
  id: string;
  num: number;
  ChangeDataNumber: any;
};

export default (props: PropsType) => {
  const [number, SetNumber] = useState<number>();

  useEffect(() => {
    SetNumber(props.num);
  }, [number]);

  return (
    <View className="UtilWrapper">
      <AtMessage />
      {/* 减 */}
      <View
        className="reduce"
        onClick={() => {
          if (number - 1 == -1) {
            Taro.atMessage({
              message: "商品数量不能少于1",
              type: "error"
            });
            return;
          }
          props.ChangeDataNumber(props.id, number - 1);
          SetNumber(number - 1);
        }}
      >
        -
      </View>
      {/* 数字 */}
      <View className="number">{number}</View>
      {/* 加 */}
      <View
        className="add"
        onClick={() => {
          props.ChangeDataNumber(props.id, number + 1);
          SetNumber(number + 1);
        }}
      >
        +
      </View>
    </View>
  );
};
